<template>
    <div class="collect_clothes">
        <top-timer/>
        <div class="collect">
            <div class="collect_title center">
                <div class="font_40 col_333">可收衣物</div>
                <div class="font_28 col_666">请准备好专用衣物收纳袋，点击“收衣”操作</div>
            </div>
            <div class="collect_list">
                <el-row class="list_head font_30">
                    <el-col :span="12">订单号</el-col>
                    <el-col :span="6">箱隔号</el-col>
                    <!--<el-col :span="6">状态</el-col>-->
                    <el-col :span="6">操作</el-col>
                </el-row>
                <el-row class="list_body font_28" v-if="list.length <= 0">
                    <el-col>暂无可收衣物</el-col>
                </el-row>
                <el-row class="list_body font_28" v-for="item in list">
                    <el-col :span="12">{{item.orderCode}}</el-col>
                    <el-col :span="6">{{item.boxCode}}</el-col>
                    <!--<el-col :span="6">已取</el-col>-->
                    <el-col :span="6" class="handle_color">
                        <div @click="bindBag(item)">收衣</div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'collect-clothes',
    data () {
      return {
        isError: false,
        list: [],
        imgSrc: '',
      }
    },
    created () {
      this.getList();
    },
    methods: {
      bindBag (item) {
        this.$router.push({path: 'bindBag',query:{boxDetailId:item.boxDetailId,
            orderId:item.orderId,boxCode:item.boxCode}})
      },
      getList () {
        this.$axios.get('receiveClothesRest/getReceiveOrderList')
          .then(res => {
            this.list = res.data
          })
      }
    }
  }
</script>

<style lang="scss">
    .collect_clothes {
        .collect {
            .collect_title {
                div {
                    margin: 0.20rem 0;
                }
            }
            .collect_list {
                margin: 0.60rem 0.80rem;
                text-align: center;
                height: 8.00rem;
                overflow-y: scroll;
                .list_head {
                    background: rgba(236, 245, 252, 1);
                    padding: 0.19rem 0;
                    color: #999;
                }
                .list_body {
                    padding: 0.19rem 0;
                    color: #666;
                    border-bottom: 0.02rem solid rgba(202, 229, 253, 1);
                    .handle_color {
                        color: #0A82EC;
                    }
                }
            }
        }
    }
</style>
